<template>
  <div class="chat-panel">
    <!-- 头部 -->
    <el-header class="chat-header">
      <div class="header-left">
        <el-icon class="chat-icon" :size="18" color="#3b82f6">
          <ChatDotRound />
        </el-icon>
        <span class="chat-title">Cursor AI</span>
        <el-tag size="small" type="success" effect="light">在线</el-tag>
      </div>
      <div class="header-actions">
        <el-tooltip content="新建对话" placement="bottom">
          <el-button size="small" text @click="newChat" :icon="Plus" circle />
        </el-tooltip>
        <el-tooltip content="清空对话" placement="bottom">
          <el-button size="small" text @click="clearMessages" :icon="Delete" circle />
        </el-tooltip>
        <el-tooltip content="关闭面板" placement="bottom">
          <el-button size="small" text @click="closeDock" :icon="Close" circle type="danger" />
        </el-tooltip>
      </div>
    </el-header>

    <!-- 消息列表 -->
    <el-main class="chat-messages" ref="messagesContainer">
      <!-- 欢迎界面 -->
      <div v-if="messages.length === 0" class="welcome-container">
        <div class="welcome-content">
          <el-icon class="welcome-icon" :size="48" color="#3b82f6">
            <ChatDotRound />
          </el-icon>
          <h3>欢迎使用 Cursor AI</h3>
          <p class="welcome-desc">我是你的智能编程助手，可以帮助你：</p>
          <div class="feature-list">
            <el-tag class="feature-tag" v-for="feature in features" :key="feature">
              {{ feature }}
            </el-tag>
          </div>
          <div class="quick-actions">
            <el-button v-for="action in quickActions" :key="action.text" size="small" plain
              @click="sendQuickMessage(action.text)">
              {{ action.text }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 消息列表 -->
      <div class="message-list">
        <div v-for="(message, index) in messages" :key="message.id"
          :class="['message-item', `message-${message.type}`]">
          <!-- 用户消息 -->
          <div v-if="message.type === 'user'" class="user-message">
            <div class="message-content">
              <div class="message-text">{{ message.content }}</div>
              <div class="message-meta">
                <span class="message-time">{{ formatTime(message.timestamp) }}</span>
              </div>
            </div>
            <el-avatar class="message-avatar" :size="32">
              <el-icon>
                <User />
              </el-icon>
            </el-avatar>
          </div>

          <!-- AI消息 -->
          <div v-else class="ai-message">
            <el-avatar class="message-avatar ai-avatar" :size="32">
              <el-icon>
                <Avatar />
              </el-icon>
            </el-avatar>
            <div class="message-content">
              <div class="message-header">
                <span class="ai-name">Cursor AI</span>
                <el-tag v-if="message.isStreaming" size="small" type="info" effect="light">
                  正在输入...
                </el-tag>
              </div>
              <div class="message-text" v-html="formatMessageContent(message.content)"></div>
              <div class="message-actions" v-if="!message.isStreaming">
                <el-button-group size="small">
                  <el-tooltip content="复制" placement="top">
                    <el-button text :icon="CopyDocument" @click="copyMessage(message.content)" />
                  </el-tooltip>
                  <el-tooltip content="重新生成" placement="top">
                    <el-button text :icon="Refresh" @click="regenerateMessage(index)" />
                  </el-tooltip>
                  <el-tooltip content="点赞" placement="top">
                    <el-button text :icon="message.liked ? StarFilled : Star" @click="toggleLike(message)"
                      :type="message.liked ? 'primary' : 'default'" />
                  </el-tooltip>
                </el-button-group>
              </div>
              <div class="message-meta">
                <span class="message-time">{{ formatTime(message.timestamp) }}</span>
                <span v-if="message.tokens" class="token-count">{{ message.tokens }} tokens</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 流式输入指示器 -->
        <div v-if="isStreaming && currentStreamMessage" class="message-item message-ai">
          <el-avatar class="message-avatar ai-avatar" :size="32">
            <el-icon>
              <Avatar />
            </el-icon>
          </el-avatar>
          <div class="message-content">
            <div class="message-header">
              <span class="ai-name">Cursor AI</span>
              <el-tag size="small" type="info" effect="light">
                正在输入...
              </el-tag>
            </div>
            <div class="message-text streaming-text" v-html="formatMessageContent(currentStreamMessage)"></div>
            <div class="streaming-cursor"></div>
          </div>
        </div>
      </div>
    </el-main>

    <!-- 输入区域 -->
    <el-footer class="chat-input">
      <div class="input-container">
        <div class="input-wrapper">
          <el-input v-model="inputMessage" type="textarea" placeholder="输入你的问题... (支持 Markdown)"
            :autosize="{ minRows: 1, maxRows: 8 }" resize="none" @keydown="handleKeyDown" ref="inputRef"
            class="message-input" />
          <div class="input-actions">
            <el-tooltip content="上传文件" placement="top">
              <el-button text :icon="Paperclip" size="small" @click="handleFileUpload" />
            </el-tooltip>
            <el-tooltip content="语音输入" placement="top">
              <el-button text :icon="Microphone" size="small" @click="handleVoiceInput" />
            </el-tooltip>
          </div>
        </div>
        <el-button type="primary" @click="sendMessage" :disabled="!inputMessage.trim() || isLoading"
          :loading="isLoading" :icon="isLoading ? null : Position" class="send-button">
          {{ isLoading ? '发送中...' : '发送' }}
        </el-button>
      </div>

      <!-- 状态栏 -->
      <div class="status-bar">
        <div class="status-left">
          <el-icon :size="12" color="#10b981">
            <CircleCheck />
          </el-icon>
          <span>已连接</span>
        </div>
        <div class="status-right">
          <span class="model-info">GPT-4</span>
          <span class="separator">•</span>
          <span class="token-info">{{ totalTokens }} tokens</span>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, computed } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import * as ElementPlusIcons from '@element-plus/icons-vue'

// 解构图标
const {
  ChatDotRound,
  Plus,
  Delete,
  Close,
  User,
  Avatar, // 替代 Robot
  CopyDocument,
  Refresh,
  Star,
  StarFilled,
  Position, // 替代 Send
  Paperclip,
  Microphone,
  CircleCheck
} = ElementPlusIcons

// 消息接口定义
interface Message {
  id: string
  type: 'user' | 'ai'
  content: string
  timestamp: Date
  isStreaming?: boolean
  liked?: boolean
  tokens?: number
}

// 响应式数据
const messages = ref<Message[]>([])
const inputMessage = ref('')
const isLoading = ref(false)
const isStreaming = ref(false)
const currentStreamMessage = ref('')
const messagesContainer = ref<HTMLElement>()
const inputRef = ref()

// 欢迎界面数据
const features = ref([
  '代码生成与优化',
  '技术问题解答',
  '代码审查',
  '架构建议',
  'Bug 修复',
  '文档编写'
])

const quickActions = ref([
  { text: '解释这段代码' },
  { text: '优化性能' },
  { text: '修复bug' },
  { text: '生成测试用例' }
])

// 计算属性
const totalTokens = computed(() => {
  return messages.value.reduce((total, msg) => total + (msg.tokens || 0), 0)
})

// 生成唯一ID
const generateId = () => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2)
}

// 发送消息
const sendMessage = async () => {
  const content = inputMessage.value.trim()
  if (!content || isLoading.value) return

  // 添加用户消息
  const userMessage: Message = {
    id: generateId(),
    type: 'user',
    content,
    timestamp: new Date(),
    tokens: Math.ceil(content.length / 4) // 简单估算token数
  }

  messages.value.push(userMessage)
  inputMessage.value = ''
  scrollToBottom()

  // 开始AI回复
  isLoading.value = true
  try {
    await simulateStreamingResponse(content)
  } catch (error) {
    console.error('AI回复失败:', error)
    const errorMessage: Message = {
      id: generateId(),
      type: 'ai',
      content: '抱歉，我遇到了一些问题，请稍后再试。',
      timestamp: new Date(),
      tokens: 10
    }
    messages.value.push(errorMessage)
    ElMessage.error('AI 服务暂时不可用')
  } finally {
    isLoading.value = false
    isStreaming.value = false
    currentStreamMessage.value = ''
    scrollToBottom()
  }
}

// 模拟流式响应
const simulateStreamingResponse = async (userMessage: string) => {
  isStreaming.value = true
  currentStreamMessage.value = ''

  // 根据用户输入生成不同的回复
  let fullResponse = generateResponse(userMessage)

  // 模拟流式输出
  for (let i = 0; i < fullResponse.length; i++) {
    await new Promise(resolve => setTimeout(resolve, 20 + Math.random() * 30))
    currentStreamMessage.value += fullResponse[i]
    scrollToBottom()
  }

  // 完成流式输出，添加到消息列表
  const aiMessage: Message = {
    id: generateId(),
    type: 'ai',
    content: fullResponse,
    timestamp: new Date(),
    tokens: Math.ceil(fullResponse.length / 4)
  }

  messages.value.push(aiMessage)
  isStreaming.value = false
  currentStreamMessage.value = ''
}

// 生成AI回复内容
const generateResponse = (userMessage: string): string => {
  const lowerMsg = userMessage.toLowerCase()

  if (lowerMsg.includes('你好') || lowerMsg.includes('hello')) {
    return `你好！👋 我是 Cursor AI，你的智能编程助手。我可以帮助你：

**代码相关：**
- 生成和优化代码
- 解释复杂的代码逻辑
- 进行代码审查和重构建议

**问题解决：**
- 调试和修复 bug
- 性能优化建议
- 架构设计指导

有什么我可以帮助你的吗？`
  }

  if (lowerMsg.includes('时间')) {
    return `当前时间是：**${new Date().toLocaleString('zh-CN')}**

需要我帮你处理任何时间相关的编程问题吗？比如：
- 时间格式化
- 时区处理
- 定时任务
- 性能监控`
  }

  if (lowerMsg.includes('代码') || lowerMsg.includes('code')) {
    return `我很乐意帮你处理代码相关的问题！🚀

请告诉我：
1. **编程语言**：JavaScript, Python, Java, C++ 等
2. **具体需求**：生成、优化、调试、解释
3. **代码上下文**：如果有现有代码，请分享给我

例如：
\`\`\`javascript
// 这是一个示例函数
function example() {
  console.log('Hello World');
}
\`\`\`

我可以帮你改进、解释或扩展这段代码。`
  }

  if (lowerMsg.includes('帮助') || lowerMsg.includes('help')) {
    return `我是 Cursor AI，专为开发者设计的智能助手！✨

**核心功能：**
- 🔧 **代码生成**：根据需求生成高质量代码
- 📖 **代码解释**：详细解释代码逻辑和原理
- 🎯 **Bug 修复**：识别并修复代码问题
- ⚡ **性能优化**：提供性能改进建议
- 📝 **文档编写**：生成技术文档和注释
- 🧪 **测试用例**：创建单元测试和集成测试

**支持的技术栈：**
JavaScript/TypeScript, Python, Java, C++, React, Vue, Node.js, 数据库, 云服务等

直接告诉我你的需求，我会提供专业的解决方案！`
  }

  // 默认回复
  return `收到你的消息："${userMessage}"

这是一个演示环境，我正在模拟 AI 对话功能。在实际使用中，我会：

**分析你的问题** → **提供专业解答** → **给出可行方案**

目前支持的功能包括：
- ✅ 流式对话体验
- ✅ 代码高亮显示  
- ✅ 消息操作（复制、重新生成、点赞）
- ✅ 实时状态显示
- ✅ Token 计数

你可以尝试问我关于编程、代码优化或技术问题！`
}

// 快速发送消息
const sendQuickMessage = (text: string) => {
  inputMessage.value = text
  sendMessage()
}

// 新建对话
const newChat = () => {
  messages.value = []
  ElMessage.success('已开始新对话')
}

// 清空消息
const clearMessages = () => {
  messages.value = []
  ElMessage.success('对话已清空')
}

// 关闭面板
const closeDock = () => {
  window.dispatchEvent(new CustomEvent('closeDock'))
}

// 复制消息
const copyMessage = async (content: string) => {
  try {
    await navigator.clipboard.writeText(content)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

// 重新生成消息
const regenerateMessage = async (index: number) => {
  if (index > 0) {
    const userMessage = messages.value[index - 1]
    if (userMessage && userMessage.type === 'user') {
      // 移除AI消息
      messages.value.splice(index, 1)
      // 重新生成
      isLoading.value = true
      try {
        await simulateStreamingResponse(userMessage.content)
      } finally {
        isLoading.value = false
      }
    }
  }
}

// 点赞/取消点赞
const toggleLike = (message: Message) => {
  message.liked = !message.liked
  ElMessage.success(message.liked ? '已点赞' : '已取消点赞')
}

// 文件上传
const handleFileUpload = () => {
  ElMessage.info('文件上传功能开发中...')
}

// 语音输入
const handleVoiceInput = () => {
  ElMessage.info('语音输入功能开发中...')
}

// 处理键盘事件
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage()
  }
}

// 格式化消息内容（支持 Markdown）
const formatMessageContent = (content: string) => {
  return content
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/`(.*?)`/g, '<code>$1</code>')
    .replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre><code class="language-$1">$2</code></pre>')
    .replace(/\n/g, '<br>')
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 格式化时间
const formatTime = (date: Date) => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 24小时内
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else {
    return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
}

onMounted(() => {
  // 自动聚焦输入框
  nextTick(() => {
    if (inputRef.value) {
      inputRef.value.focus()
    }
  })

  // 显示欢迎消息
  ElNotification({
    title: 'Cursor AI',
    message: '智能编程助手已启动，随时为你提供帮助！',
    type: 'success',
    duration: 3000
  })
})
</script>

<style scoped lang="scss">
.chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

// 头部样式
.chat-header {
  height: 50px !important;
  padding: 0 16px !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  .header-left {
    display: flex;
    align-items: center;
    gap: 8px;

    .chat-icon {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    .chat-title {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    :deep(.el-tag) {
      font-size: 11px;
      padding: 2px 6px;
      height: 20px;
    }
  }

  .header-actions {
    display: flex;
    gap: 8px;

    :deep(.el-button) {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }

      &.el-button--danger:hover {
        background: rgba(239, 68, 68, 0.8);
      }
    }
  }
}

// 消息区域
.chat-messages {
  flex: 1 !important;
  padding: 0 !important;
  overflow-y: auto;
  background: #fafbfc;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;

    &:hover {
      background: rgba(0, 0, 0, 0.2);
    }
  }
}

// 欢迎界面
.welcome-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;

  .welcome-content {
    text-align: center;
    max-width: 360px;

    .welcome-icon {
      margin-bottom: 16px;
      filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
    }

    h3 {
      margin: 0 0 8px 0;
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;
      letter-spacing: -0.02em;
    }

    .welcome-desc {
      color: #6b7280;
      margin-bottom: 16px;
      line-height: 1.4;
      font-size: 13px;
    }

    .feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 16px;

      .feature-tag {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 10px;
        height: 22px;
      }
    }

    .quick-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;

      :deep(.el-button) {
        border-radius: 16px;
        font-size: 12px;
        padding: 4px 12px;
        height: 28px;
      }
    }
  }
}

// 消息列表
.message-list {
  padding: 16px;

  .message-item {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 用户消息
.user-message {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;

  .message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 16px 4px 16px;
    padding: 8px 12px;
    max-width: 75%;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

    .message-text {
      line-height: 1.4;
      font-size: 13px;
      word-wrap: break-word;
    }

    .message-meta {
      margin-top: 4px;

      .message-time {
        font-size: 10px;
        opacity: 0.8;
      }
    }
  }

  .message-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  }
}

// AI消息
.ai-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  .ai-avatar {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  }

  .message-content {
    background: white;
    border-radius: 16px 16px 16px 4px;
    padding: 12px;
    max-width: 75%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;

    .message-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;

      .ai-name {
        font-weight: 600;
        color: #1f2937;
        font-size: 12px;
      }

      :deep(.el-tag) {
        font-size: 10px;
        padding: 1px 4px;
        height: 18px;
      }
    }

    .message-text {
      line-height: 1.5;
      font-size: 13px;
      color: #374151;
      word-wrap: break-word;

      :deep(strong) {
        font-weight: 600;
        color: #1f2937;
      }

      :deep(em) {
        font-style: italic;
        color: #6b7280;
      }

      :deep(code) {
        background: #f3f4f6;
        padding: 1px 4px;
        border-radius: 3px;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
        font-size: 12px;
        color: #dc2626;
      }

      :deep(pre) {
        background: #1f2937;
        color: #f9fafb;
        padding: 8px 12px;
        border-radius: 6px;
        margin: 6px 0;
        overflow-x: auto;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
        font-size: 12px;
        line-height: 1.4;

        code {
          background: none;
          padding: 0;
          color: inherit;
        }
      }
    }

    .message-actions {
      margin-top: 8px;
      opacity: 0;
      transition: opacity 0.2s;

      :deep(.el-button-group) {
        .el-button {
          border: none;
          background: none;
          color: #9ca3af;
          padding: 2px 6px;
          font-size: 12px;

          &:hover {
            color: #6b7280;
            background: #f3f4f6;
          }

          &.el-button--primary {
            color: #3b82f6;
          }
        }
      }
    }

    .message-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;

      .message-time,
      .token-count {
        font-size: 10px;
        color: #9ca3af;
      }

      .token-count {
        background: #f3f4f6;
        padding: 1px 4px;
        border-radius: 3px;
        font-family: 'SF Mono', Monaco, monospace;
      }
    }
  }

  &:hover .message-actions {
    opacity: 1;
  }
}

// 流式输入效果
.streaming-text {
  position: relative;
}

.streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: #3b82f6;
  margin-left: 2px;
  animation: blink 1s infinite;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

// 输入区域
.chat-input {
  height: auto !important;
  padding: 16px !important;
  background: white;
  border-top: 1px solid #e5e7eb;

  .input-container {
    display: flex;
    gap: 8px;
    align-items: flex-end;

    .input-wrapper {
      flex: 1;
      position: relative;

      :deep(.el-textarea) {
        .el-textarea__inner {
          border-radius: 10px;
          border: 1px solid #e5e7eb;
          padding: 8px 40px 8px 12px;
          font-size: 13px;
          line-height: 1.4;
          resize: none;
          transition: all 0.2s;

          &:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
          }

          &::placeholder {
            color: #9ca3af;
            font-size: 13px;
          }
        }
      }

      .input-actions {
        position: absolute;
        right: 6px;
        bottom: 6px;
        display: flex;
        gap: 2px;

        :deep(.el-button) {
          color: #9ca3af;
          padding: 4px;

          &:hover {
            color: #6b7280;
          }
        }
      }
    }

    .send-button {
      height: 32px;
      padding: 0 16px;
      border-radius: 16px;
      font-weight: 500;
      font-size: 12px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      transition: all 0.2s;

      &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }

      &:disabled {
        opacity: 0.6;
        transform: none;
      }
    }
  }

  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    font-size: 11px;

    .status-left {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #10b981;
      font-weight: 500;
    }

    .status-right {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #9ca3af;

      .model-info {
        background: #f3f4f6;
        padding: 1px 6px;
        border-radius: 3px;
        font-family: 'SF Mono', Monaco, monospace;
        font-weight: 500;
        font-size: 10px;
      }

      .separator {
        color: #d1d5db;
      }

      .token-info {
        font-family: 'SF Mono', Monaco, monospace;
        font-size: 10px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {

  .user-message .message-content,
  .ai-message .message-content {
    max-width: 85%;
  }

  .welcome-content {
    padding: 16px;

    h3 {
      font-size: 16px;
    }

    .welcome-desc {
      font-size: 12px;
    }

    .feature-list .feature-tag {
      font-size: 10px;
    }

    .quick-actions :deep(.el-button) {
      font-size: 11px;
      height: 24px;
    }
  }

  .chat-input {
    padding: 12px !important;

    .input-container .send-button {
      height: 28px;
      padding: 0 12px;
      font-size: 11px;
    }

    .status-bar {
      font-size: 10px;

      .model-info,
      .token-info {
        font-size: 9px;
      }
    }
  }
}

// 暗色主题支持
@media (prefers-color-scheme: dark) {
  .chat-panel {
    background: #1f2937;

    .chat-messages {
      background: #111827;
    }

    .welcome-content {
      h3 {
        color: #f9fafb;
      }

      .welcome-desc {
        color: #9ca3af;
      }
    }

    .ai-message .message-content {
      background: #374151;
      border-color: #4b5563;

      .message-text {
        color: #f3f4f6;

        :deep(strong) {
          color: #f9fafb;
        }

        :deep(code) {
          background: #4b5563;
          color: #fbbf24;
        }
      }

      .ai-name {
        color: #f9fafb;
      }
    }

    .chat-input {
      background: #1f2937;
      border-top-color: #374151;

      :deep(.el-textarea .el-textarea__inner) {
        background: #374151;
        border-color: #4b5563;
        color: #f3f4f6;

        &:focus {
          border-color: #3b82f6;
        }

        &::placeholder {
          color: #6b7280;
        }
      }
    }
  }
}
</style>
